<template>
<div>
  <div class="row-header">
    <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="50px">
      <el-form-item label=" ">
        <el-date-picker class="select" v-model="startDate" type="daterange" unlink-panels range-separator="至" start-placeholder="申请时间起始日期" end-placeholder="申请时间结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions" @change="changeDate"></el-date-picker>
      </el-form-item>
      <el-form-item label=" ">
        <el-date-picker class="select" v-model="endDate" type="daterange" unlink-panels range-separator="至" start-placeholder="处理时间起始始日期" end-placeholder="处理时间结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions" @change="changeDate1"></el-date-picker>
      </el-form-item>
      <el-form-item label=" " prop="cardNumber">
        <el-input size="small" v-model.trim="searchForm.cardNumber" style="width: 350px;" clearable placeholder="请输入业务号码"></el-input>
      </el-form-item>
      <el-form-item label=" " prop="phoneNumber">
        <el-input size="small" v-model="searchForm.phoneNumber" style="width: 350px;" clearable placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-select size="small" v-model="searchForm.dictStatus" placeholder="请选择处理状态" style="width: 350px" clearable>
          <el-option v-for="state in dictExamineStatusSelect" :key="state.value" :label="state.label" :value="state.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click="beforeinitData">查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-refresh-right" @click="resetForm('searchForm')">重置</el-button>
        <el-button type="shenda" size="small" icon="el-icon-download" @click="exlDownload">导出</el-button>
      </div>
    </div>
    <div class="sd-page-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="mini" @click="initData">刷新数据 <i class="el-icon-refresh"></i></el-button>
      <el-button type="shenda" size="mini" icon="el-icon-check" @click="passAll" v-preventReClick>批量通过</el-button>
      <el-button type="shenda" size="mini" icon="el-icon-close" @click="rejectAll" v-preventReClick>批量拒绝</el-button>
      <el-table :data="tableData" ref="table" align="center" class="row-main-table"
                :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266'}"
                 v-loading.fullscreen="mainTableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                 :pager-config="tablePage" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名"></el-table-column>
        <el-table-column prop="phoneNumber" label="联系电话"></el-table-column>
        <el-table-column prop="idWords" label="身份证号"></el-table-column>
        <el-table-column prop="cardNumber" label="业务号码"></el-table-column>
        <el-table-column prop="dentityPicFront" label="证件正面">
          <template v-slot="{ row, rowIndex }">
            <div v-if="row.dentityPicFront !== null">
              <el-popover placement="bottom" label="" trigger="hover">
                <div style="width:600px">
                  <img :src="row.dentityPicFront" style="width:100%">
                </div>
                <img slot="reference" :src="row.dentityPicFront" style="width: 100%; height: 100%;"></el-popover>
            </div>
            <div v-else>
              暂未上传
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dentityPicBack" label="证件反面">
          <template class="pic" v-slot="{ row, rowIndex }" >
            <div v-if="row.dentityPicBack !== null">
              <el-popover placement="bottom" label="" trigger="hover">
                <div style="width:600px">
                  <img :src="row.dentityPicBack" style="width:100%">
                </div>
                <img slot="reference" :src="row.dentityPicBack" style="width: 100%; height: 100%;"></el-popover>
            </div>
            <div v-else>
              暂未上传
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dentityPicHand" label="手持证件">
          <template class="pic" v-slot="{ row, rowIndex }" >
            <div v-if="row.dentityPicHand !== null">
              <el-popover placement="bottom" label="" trigger="hover">
                <div style="width:600px">
                  <img :src="row.dentityPicHand" style="width:100%">
                </div>
                <img slot="reference" :src="row.dentityPicHand" style="width: 100%; height: 100%;"></el-popover>
            </div>
            <div v-else>
              暂未上传
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dictStatusName" label="审核结果"></el-table-column>
        <el-table-column prop="insertTime" label="提出申请时间"></el-table-column>
        <el-table-column prop="updateTime" label="处理时间"></el-table-column>
        <el-table-column prop="operatorName" label="处理人"></el-table-column>
        <el-table-column label="操作" width="60">
          <template v-slot="{ row, rowIndex }">
            <el-dropdown trigger="click" v-show="row.dictStatus!=='C_THROUGH'">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" @click="showPass(row)" v-if="row.dictStatus==='C_WAIT'||row.dictStatus==='AUTOMATIC_PASS'" v-preventReClick>通过</el-button>
                <el-button class="operation" @click="showNotPass(row)" v-if="row.dictStatus==='C_WAIT'||row.dictStatus==='AUTOMATIC_PASS'" v-preventReClick>拒绝</el-button>
                <el-button class="operation" @click="showReason(row)" v-if="row.dictStatus==='C_REFUSE'">拒绝原因</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>

  <el-dialog class="examine" top="33vh" :visible.sync="notPass" :append-to-body="true" width="30%" :before-close="handleClose">
    <el-form :model="rejectReason" ref="rejectReason" :rules="rejectReasonRules">
      <el-form-item :label="rejectReasonLabel" prop="remark" label-width="120px">
        <el-input type="textarea" v-model="rejectReason.remark"></el-input>
      </el-form-item>
    </el-form><span class="dialog-footer" slot="footer">
      <el-button @click="notPass = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="submitNotPass()" v-preventReClick v-if="rejectReasonLabel==='拒绝原因'">确 定</el-button>
      <el-button type="primary" size="small" @click="submitNotPassAll()" v-preventReClick v-if="rejectReasonLabel==='批量拒绝原因'">确 定</el-button></span>
  </el-dialog>
  <el-dialog class="examine" top="33vh" :visible.sync="throughListVisible" :append-to-body="true" width="30%" :before-close="handleClose">
    <span v-text="throughText"></span><span class="dialog-footer" slot="footer">
      <el-button @click="throughListVisible = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="passAllConfirm" v-preventReClick v-if="throughText==='确认批量通过选中申请'">确 定</el-button>
      <el-button type="primary" size="small" @click="rejectAllConfirm" v-preventReClick v-else-if="throughText==='确认批量拒绝选中申请'">确 定</el-button>
      <el-button type="primary" size="small" @click="passConfirm" v-preventReClick v-else-if="throughText==='确认通过选中申请'">确 定</el-button>
      <el-button type="primary" size="small" @click="rejectConfirm" v-preventReClick v-else-if="throughText==='确认拒绝选中申请'">确 定</el-button>
      <el-button type="primary" size="small" @click="throughListVisible = false" v-preventReClick v-else>确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { realNameCheckList, findingsOfAudit,updateRealNameStatus } from '@/api/getData'

export default {
  name: 'RealName',
  data() {
    return {
      tempRowInfo:{},
      selectList:[],
      throughText:'',
      throughListVisible:false,
      // loading
      mainTableLoading:false,

      // 分页
      page: {
        current: 1,
        size: 10,
        total: 0,
        ascs: [],
        descs: ['insertTime'],
      },
      searchForm:{
        cardNumber:'',
        phoneNumber:'',
        dictStatus:'',
        startInsertTime:'',
        endInsertTime:'',
        startUpdateTime:'',
        endUpdateTime:''
      },
      tablePage: {
        pageSize: 15,
        pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000]
      },
      rejectReason: {
        remark: ''
      },
      rejectReasonLabel:'',
      rejectReasonRules: {
        remark: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]
      },
      examine: false,
      tableData: [],
      startDate: [],
      endDate: [],
      adopt: false,
      notPass: false,
      tableLoading: false,
      customerName: '',
      insertTime: '',
      imageUrl: '',
      dictExamineStatusSelect: [
        {
          value: 'C_THROUGH',
          label: '通过'
        },
        {
          value: 'C_WAIT',
          label: '待审核'
        },
        {
          value: 'C_REFUSE',
          label: '拒绝'
        },
        {
          value: 'USER_STATUS_CLOSE',
          label: '禁用'
        },
        {
          value: 'AUTOMATIC_PASS',
          label: '自动通过'
        }
      ],
      value: false,
      id: '',
      pagekey: '',
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
    }
  },
  created() {
    let searchObj=sessionStorage.getItem(this.$route.path)
    if (searchObj != undefined && searchObj != null && searchObj != "") {
      this.searchForm = JSON.parse(searchObj);
      // console.log(this.searchForm);
      if (this.searchForm.startInsertTime !== "") {
        this.startDate.push(this.searchForm.startInsertTime);
      }
      if (this.searchForm.endInsertTime !== "") {
        this.startDate.push(this.searchForm.endInsertTime);
      }
      if (this.searchForm.startUpdateTime !== "") {
        this.endDate.push(this.searchForm.startUpdateTime);
      }
      if (this.searchForm.endUpdateTime !== "") {
        this.endDate.push(this.searchForm.endUpdateTime);
      }
      this.page = this.searchForm.page;
    }
    this.initData()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectList = val;
    },
    // 批量选取
    // selectAllEvent ({ checked, records }) {
    //   // console.log(checked ? '所有勾选事件' : '所有取消事件', records)
    //   this.selectList = records
    // },
    // 选取
    // selectChangeEvent ({ checked, records }) {
    //   // console.log(checked ? '勾选事件' : '取消事件', records)
    //   this.selectList = records
    // },
    // 重置页码
    beforeinitData(){
      this.page.current = 1
      this.initData()
    },
    // 数据初始化
    async initData() {
      this.searchForm.page = this.page;
      this.mainTableLoading = true;
      sessionStorage.setItem(this.$route.path,JSON.stringify(this.searchForm))

      const returnData = await realNameCheckList(this.searchForm,
      {
        obj: this,
        key: 'tableLoading'
      })
      this.tableData = []
      if (returnData._result) {
        const imageUrl = localStorage.getItem('image')
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.remark = item.remark
          obj.customerName = item.customerName // 客户名称
          obj.operatorName = item.operatorName // 处理人
          obj.dictStatus = item.dictStatus // 审核结果
          obj.dictStatusName = item.dictStatusName // 审核结果
          obj.phoneNumber = item.phoneNumber // 电话号码
          obj.idWords = item.idWords // 电话号码
          obj.cardNumber = item.cardNumber // 电话号码
          obj.dentityPicFront = item.dentityPicFront //==null?'暂未上传':item.dentityPicFront // 证件正面
          obj.dentityPicBack = item.dentityPicBack //==null?'暂未上传':item.dentityPicBack // 证件反面
          obj.dentityPicHand = item.dentityPicHand //==null?'暂未上传':item.dentityPicHand// 手持证件
          obj.insertTime = item.insertTime // 申请时间
          obj.updateTime = item.updateTime // 处理时间
          this.tableData.push(obj)
        })
        this.page.total = returnData.data.total
        // this.tableLoading = false;
      }
      this.mainTableLoading = false
    },
    exlDownload(){
      this.tableLoading = true;
      this.loading = true;
      let obj = this.searchForm;
      obj.page.size = this.page.total;
      console.log('---------')
      console.log(obj)
      let info = {
        api: 'realNameCheckList',
        name: '实名审核列表'
      };

      let list = [];
      let filterVal = [];
      let arr = new Array(...this.$refs.table.collectColumn);
      arr.shift();
      arr.shift();
      for (let item of arr) {
        list.push(item.title);
        filterVal.push(item.property);
      }
      list.pop();
      filterVal.pop();
      this.tableLoading = false;
      this.loading = false;

      const {href} = this.$router.resolve({
        path: '/exl/exlDownload',
        query: {
          list: JSON.stringify(list),
          filterVal: JSON.stringify(filterVal),
          obj: JSON.stringify(obj),
          info: JSON.stringify(info),
        }
      });
      window.open(href, '_blank');
    },
    // 确认关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 分页
    handleSizeChange(val){
      this.page.size = val;
      this.current = 1;
      this.initData();
    },
    handleCurrentChange(val){
      this.page.current = val;
      this.initData();
    },
    // 申请时间区间
    changeDate() {
      console.log(this.startDate);
      if (this.startDate) {
        this.searchForm.startInsertTime = this.startDate[0];
        this.searchForm.endInsertTime = this.startDate[1];
      } else {
        this.searchForm.startInsertTime = "";
        this.searchForm.endInsertTime = "";
      }
    },
    // 处理时间区间
    changeDate1() {
      // console.log(this.endDate);
      if (this.endDate) {
        this.searchForm.startUpdateTime = this.endDate[0];
        this.searchForm.endUpdateTime = this.endDate[1];
      } else {
        this.searchForm.startUpdateTime = "";
        this.searchForm.endUpdateTime = "";
      }
    },
    // 重置-查询条件
    resetForm(formName) {
      // this.$refs[formName].resetprops();
      this.startDate = "";
      this.endDate = "";
      this.searchForm = {
        cardNumber:'',
        phoneNumber:'',
        dictStatus:'',
        startInsertTime:'',
        endInsertTime:'',
        startUpdateTime:'',
        endUpdateTime:''
      };
    },
    // 批量通过
    async passAll(){
      if(this.selectList.length===0){
        this.$message.error('您暂未选中任何一条数据');
        return false
      }
      this.throughText = "确认批量通过选中申请";
      this.throughListVisible = true;
      this.pagekey = await this.$getPageKey();
    },
    // 批量通过确认
    async passAllConfirm(){
      this.pagekey = await this.$getPageKey();

      let saveInfo= {
        dictStatus:"C_THROUGH",
        realnameExamineList:this.selectList
      }
      this.saveRealNameStatus(saveInfo)
    },
    // 批量拒绝
    async rejectAll(){
      if(this.selectList.length===0){
        this.$message.error('您暂未选中任何一条数据');
        return false
      }
      this.throughText = "确认批量拒绝选中申请";
      this.throughListVisible = true;
      this.pagekey = await this.$getPageKey();
    },
    // 批量拒绝确认
    async rejectAllConfirm(){
      this.notPass = true
      this.rejectReasonLabel = '批量拒绝原因';
      this.pagekey = await this.$getPageKey();
    },
    // 填写批量拒绝原因
    async submitNotPassAll(){
        let saveInfo= {
        dictStatus:"C_REFUSE",
        remark:this.rejectReason.remark,
        realnameExamineList:this.selectList
      }
      this.saveRealNameStatus(saveInfo);
      this.pagekey = await this.$getPageKey();
    },
    // 更改实名状态接口调用
    async saveRealNameStatus(info){
      const returnData = await updateRealNameStatus(info,{pagekey:this.pagekey});
      if (returnData._result) {
        this.$message({ message: '操作成功', type: 'success' })
        this.initData();
        this.throughListVisible = false;
        this.notPass=false
      }
    },
    // 显示通过确认
    async showPass(row){
      this.tempRowInfo = row;
      this.throughText = "确认通过选中申请";
      this.throughListVisible = true;
      this.pagekey = await this.$getPageKey();
    },
    // 通过确认
    async passConfirm(){
      let list = [];
      list.push(this.tempRowInfo);
      let saveInfo = {
        dictStatus:"C_THROUGH",
        realnameExamineList:list
      };
      this.saveRealNameStatus(saveInfo)
    },
    // 显示拒绝确认
    async showNotPass(row){
      this.tempRowInfo = row;
      this.throughText = "确认拒绝选中申请";
      this.throughListVisible = true;
      this.pagekey = await this.$getPageKey();
    },
    // 拒绝确认
    async rejectConfirm(){
      this.notPass = true;
      this.rejectReasonLabel = '拒绝原因';
    },
    // 确认拒绝原因
    async submitNotPass(){
      let list = []
      list.push(this.tempRowInfo)
      let saveInfo = {
        dictStatus:"C_REFUSE",
        remark:this.rejectReason.remark,
        realnameExamineList:list
      }
      this.pagekey = await this.$getPageKey();
      this.saveRealNameStatus(saveInfo)
    },
    // 展示拒绝原因
    showReason(row){
      this.throughText = row.remark
      this.throughListVisible = true
    }

  }
}
</script>

<style scoped lang="scss">
.div {
  .el-header {
    margin-top: 5vh;
  }
  .el-main {
    .block {
      float: right;
    }
    .el-dropdown-link {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.examine /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}
.el-popper[x-placement^=bottom] {
  margin-right: -25px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -25px;
  button {
    display: block;
  }
  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
